import React, { ReactNode } from 'react';
import { useEffect } from 'react';
import { useRef } from 'react';
import { useState } from 'react';
import { useSetRecoilState } from 'recoil';
import { mouse } from '../../store/mouse';
import App from '../App';
import styles from './index.module.scss';
import 终端 from  '../../../image/终端.png'
import 启动台 from  '../../../image/启动台.png'
import 废纸篓空明 from  '../../../image/废纸篓空明.png'
import 系统偏好设置 from  '../../../image/系统偏好设置.png'
import 照片 from  '../../../image/照片.png'
import 活动监视器 from  '../../../image/活动监视器.png'
import appstore from  '../../../image/appstore.png'
const DockUI: React.FC<{ children?: ReactNode }> = ({ children }) => {
    const setMouse = useSetRecoilState(mouse)

    const dockref: any = useRef(null)
    useEffect(() => {
        const dock: HTMLDivElement = dockref.current

        
        dock.onmousemove = (e) => {
            const left = dock.offsetLeft
            
            setMouse([e.pageX - left, e.pageY])
        }
        dock.onmouseleave = (e) => {
            setMouse([0, 0])
        }
    }, [setMouse])
    return (
        <div
            ref={dockref}
            className={styles.box}
        >
            <div className={styles.border}></div>
            {
                children

            }
        </div>
    )
}



const Dock = () => {
    return (
        <DockUI>
            <App bg={appstore} tip="应用商店"/>
            <App bg={启动台} tip="启动台"/>
            <App bg={系统偏好设置} tip="心情设置"/>
            <App bg={照片}  tip="照片"/>
            <App bg={活动监视器}  tip="张森的活动"/>
            <App bg={终端}  tip="终端"/>
            <App bg={废纸篓空明}  tip="张森的废纸篓"/>
        </DockUI>

    )
}


export default Dock